<template>
  <div class="search_bar">
    <!-- 这里用覆盖应该要好很多,点击样式展示弹层,搜索都在弹层上进行实现 -->
    <!-- <van-search placeholder="请输入搜索关键词" v-model="value" /> -->
    <div class="search_area" @click="showPoP">请输入你想比价的商品</div>
    <div class="fake_btn" @click="showPoP">搜索</div>
    <van-popup v-model="show" position="left" overlay-class="popClass">打算直接用model之类的进行覆盖</van-popup>
  </div>
</template>

<script>
export default {
  name: 'SerachBar',
  data() {
    return {
      show: false,
      iconList: []
    }
  },
  created() {

  },
  methods: {
    showPoP() {
      this.show = !this.show
    }
  }
}
</script>
<style scoped lang='stylus'>
.search_bar
  display flex
  justify-content center
  align-items center
  padding 0 0.2rem
  background-color #fff
  margin-bottom .2rem
  .search_area
    width 80%
    height 0.8rem
    margin 0.2rem auto
    padding 0 0.2rem
    line-height 0.8rem
    border-radius 0.3rem
    box-sizing border-box
    background-color #f7f8fa
    text-indent 0.2rem
    color #969799
  .fake_btn
    width 14%
    height 0.8rem
    line-height 0.8rem
    text-align center
    color #fff
    border-radius 0.24rem
    background-color #ff841d
.popClass
  background-color yellow
</style>
